<template>
  <div>
    <p class="title">查看 </p>
    <div class="box">
      <div class="box1">
        <div class="box1-1">举报模块：</div>
        <div class="box1-2">
          <div v-if="info.sourceType==1">动态</div>
          <div v-else-if="info.sourceType==2">视频</div>
          <div v-else-if="info.sourceType==3">用户</div>
          <div v-else-if="info.sourceType==4">直播</div>
          <div v-else-if="info.sourceType==5">活动作品</div>
        </div>
      </div>
      <div class="box1">
        <div class="box1-1">举报来源：</div>
        <div class="box1-2">{{info.sourceName}}</div>
      </div>
      <div class="box1">
        <div class="box1-1">被举报用户：</div>
        <div class="box1-2">{{info.reportUidName}}</div>
      </div>
      <div class="box1">
        <div class="box1-1">举报类型：</div>
        <div class="box1-2">{{info.reportTypeName}}</div>
      </div>
      <div class="box1">
        <div class="box1-1">举报描述：</div>
        <div class="box1-2">
          {{info.reportContent}}
        </div>
      </div>
      <div class="box1">
        <div class="box1-1">举报时间：</div>
        <div class="box1-2">{{info.reportTime}}</div>
      </div>
      <div class="box1">
        <div class="box1-1">举报人：</div>
        <div class="box1-2">{{info.uidName}}</div>
      </div>
      <div class="box1">
        <img v-for="item in info.reportPicture" :src="item" alt="" />
      </div>
      <div class="state" v-if="info.handleState==1 ">
        <div>
          <span>员工编号：</span>
          <span>{{info.handler}}</span>
        </div>
        <div>
          <span>处理人：</span>
          <span>{{info.handlerName}}</span>
        </div>
        <div>
          <span>处理时间：</span>
          <span>{{info.handleTime}}</span>
        </div>
      </div>
      <div class="btn">
        <el-button type="primary">取消</el-button>
        <el-button v-if="info.handleState==1" type="primary">已处理</el-button>
        <el-button v-else-if="info.handleState==2" type="primary" @click="updateReport">处理</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import apis from "../apis/modules/report.js"
  export default {
    props: ["reportId"],
    data() {
      return {
        info: {}
      }
    },
    mounted() {
      this.showReport()
    },
    methods: {
      // 查询举报详情
      async showReport() {
        const { code, data, msg } = await apis.showReport({
          reportId: this.reportId
        })
        if (code == 200) {
          this.info = data;
          this.info.reportPicture = data.reportPicture.split(",")
        }
      },
      // 处理举报
      updateReport() {
        this.$confirm('确认处理该举报?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const { code, data, msg } = await apis.updateReport({
            reportId: this.reportId
          })
          if (code == 200) {
            this.showReport()
            this.$message.success(msg)
          }
        }).catch(() => {

        });
      },
    }
  };
</script>

<style lang="scss" scoped>
  .title {
    margin-top: -10px;
    font-size: 14px;
  }

  .box1 {
    display: flex;
    margin-top: 20px;

    img {
      width: 178px;
      height: 178px;
      background: #ccc;
      margin-left: 20px;
    }

    .box1-1 {
      width: 100px;
      text-align: right;
      font-weight: 800;
    }

    .box1-2 {
      width: 600px;
      margin-left: 20px;
    }
  }

  .box {
    padding: 0 40px;
  }

  .btn {
    width: 300px;
    margin: 0 auto;
    margin-top: 48px;

    .el-button {
      width: 100px;
    }
  }

  .state {
    margin-top: 20px;
    padding-top: 40px;
    border-top: 1px solid #000;
    display: flex;
    margin-bottom: 40px;

    div {
      margin-right: 40px;

      :nth-child(2) {
        font-size: 13px;
      }
    }
  }
</style>